<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>色彩偏好测试 - 兴趣问答测试详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #ec4899;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-light: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* 测试头部 */
        .test-header {
            background-color: var(--bg-white);
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .test-category {
            display: inline-block;
            padding: 2px 8px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            font-size: 0.75rem;
            border-radius: 4px;
            margin-bottom: 8px;
        }
        
        .test-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        
        .test-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 测试图片 */
        .test-image {
            width: 100%;
            margin-bottom: 16px;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .test-image img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
        }
        
        /* 测试描述 */
        .test-description {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 12px;
            border-radius: var(--radius);
            line-height: 1.6;
            font-size: 0.95rem;
        }
        
        .description-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 1.05rem;
        }
        
        /* 操作按钮区 */
        .action-buttons {
            background-color: var(--bg-white);
            padding: 12px 16px;
            display: flex;
            gap: 12px;
            border-radius: var(--radius);
            margin-bottom: 12px;
        }
        
        .primary-action {
            flex: 2;
            padding: 10px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
        }
        
        .primary-action:hover {
            background-color: var(--primary-dark);
        }
        
        .secondary-action {
            flex: 1;
            padding: 10px 0;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .secondary-action:hover {
            background-color: #e2e8f0;
            color: var(--primary);
        }
        
        /* 数据统计 */
        .test-stats {
            background-color: var(--bg-white);
            padding: 16px;
            border-radius: var(--radius);
            margin-bottom: 12px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        
        .stat-card {
            background-color: var(--bg-light);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 结果预览 */
        .results-preview {
            background-color: var(--bg-white);
            padding: 16px;
            border-radius: var(--radius);
            margin-bottom: 12px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 1.05rem;
            font-weight: 600;
        }
        
        .see-more {
            font-size: 0.85rem;
            color: var(--primary);
        }
        
        .result-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 12px;
        }
        
        .result-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .result-info {
            flex: 1;
        }
        
        .result-user {
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .result-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        /* 留言区 */
        .comments-section {
            background-color: var(--bg-white);
            padding: 16px;
            border-radius: var(--radius);
            margin-bottom: 80px;
        }
        
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .comment-input {
            flex: 1;
            position: relative;
        }
        
        .comment-input textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            resize: none;
            font-size: 0.9rem;
            min-height: 40px;
            max-height: 120px;
        }
        
        .comment-input textarea:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .send-comment {
            position: absolute;
            right: 8px;
            bottom: 8px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .comment-author {
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.75rem;
            color: var(--text-light);
        }
        
        .comment-text {
            font-size: 0.9rem;
            margin-bottom: 6px;
            padding: 8px 12px;
            background-color: var(--bg-light);
            border-radius: 16px;
            border-top-left-radius: 4px;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
        }
        
        .comment-action {
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        /* 回复区 */
        .replies {
            margin-left: 46px;
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            font-size: 0.85rem;
            margin-bottom: 4px;
            padding: 6px 10px;
            background-color: var(--bg-light);
            border-radius: 14px;
            border-top-left-radius: 4px;
        }
        
        .reply-text span {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 回复输入框 */
        .reply-input-container {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .reply-input {
            flex: 1;
            position: relative;
        }
        
        .reply-input input {
            width: 100%;
            padding: 6px 10px;
            padding-right: 36px;
            border: 1px solid var(--border-light);
            border-radius: 16px;
            font-size: 0.85rem;
        }
        
        .reply-input input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .send-reply {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">色彩偏好测试详情</div>
        <button class="nav-btn" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 测试头部信息 -->
    <div class="test-header">
        <span class="test-category">趣味娱乐</span>
        <h1 class="test-title">色彩偏好测试：你喜欢的颜色揭示了什么性格？</h1>
        
        <div class="test-meta">
            <div class="meta-item">
                <i class="fas fa-user"></i>
                <span>测试君</span>
            </div>
            <div class="meta-item">
                <i class="fas fa-clock"></i>
                <span>2023-10-15</span>
            </div>
            <div class="meta-item">
                <i class="fas fa-eye"></i>
                <span>24.6k 浏览</span>
            </div>
        </div>
        
        <div class="test-image">
            <img src="https://picsum.photos/id/1059/800/450" alt="色彩偏好测试">
        </div>
    </div>
    
    <!-- 测试描述 -->
    <div class="test-description">
        <div class="description-title">测试介绍</div>
        <p>颜色选择与性格特质密切相关，通过你对不同颜色的偏好，分析你的性格特点。本测试包含8道精心设计的题目，从色彩心理学角度解析你的潜在个性。</p>
        <p>完成测试后，你将了解到：自己最倾向的色彩类型、对应的性格特征、适合的职业方向以及人际关系中的表现特点。</p>
    </div>
    
    <!-- 操作按钮区 -->
    <div class="action-buttons">
        <button class="primary-action">
            <i class="fas fa-play"></i>
            <span>开始测试</span>
        </button>
        <button class="secondary-action" id="collectBtn">
            <i class="far fa-bookmark"></i>
        </button>
        <button class="secondary-action" id="likeBtn">
            <i class="far fa-heart"></i>
        </button>
    </div>
    
    <!-- 数据统计 -->
    <div class="test-stats">
        <div class="section-header">
            <div class="section-title">测试数据</div>
        </div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value">8题</div>
                <div class="stat-label">题目数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">3分钟</div>
                <div class="stat-label">平均耗时</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">7.4k</div>
                <div class="stat-label">参与人数</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">4.5</div>
                <div class="stat-label">平均评分</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">89%</div>
                <div class="stat-label">完成率</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">3.2k</div>
                <div class="stat-label">分享次数</div>
            </div>
        </div>
    </div>
    
    <!-- 结果预览 -->
    <div class="results-preview">
        <div class="section-header">
            <div class="section-title">测试结果预览</div>
            <div class="see-more">查看全部</div>
        </div>
        
        <div class="result-item">
            <div class="result-avatar">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像">
            </div>
            <div class="result-info">
                <div class="result-user">阳光彩虹</div>
                <div class="result-text">你的色彩性格是：蓝色系，代表你沉稳、理性且富有洞察力</div>
            </div>
        </div>
        
        <div class="result-item">
            <div class="result-avatar">
                <img src="https://picsum.photos/id/65/100/100" alt="用户头像">
            </div>
            <div class="result-info">
                <div class="result-user">星辰大海</div>
                <div class="result-text">你的色彩性格是：紫色系，说明你富有创造力和想象力</div>
            </div>
        </div>
        
        <div class="result-item">
            <div class="result-avatar">
                <img src="https://picsum.photos/id/91/100/100" alt="用户头像">
            </div>
            <div class="result-info">
                <div class="result-user">夏日清风</div>
                <div class="result-text">你的色彩性格是：绿色系，代表你平和、友善且热爱自然</div>
            </div>
        </div>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
        <div class="section-header">
            <div class="section-title">用户留言 (128)</div>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <div class="user-avatar">
                <img src="https://picsum.photos/id/237/100/100" alt="当前用户头像">
            </div>
            <div class="comment-input">
                <textarea placeholder="分享你的想法..."></textarea>
                <button class="send-comment">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 留言列表 -->
        <div class="comments-list">
            <!-- 留言1 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/54/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">快乐小天使</div>
                        <div class="comment-time">2小时前</div>
                    </div>
                    <div class="comment-text">这个测试太准了！我果然是红色系性格，热情开朗，喜欢社交。</div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>42</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复区 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="user-avatar">
                                <img src="https://picsum.photos/id/22/100/100" alt="用户头像">
                            </div>
                            <div class="reply-content">
                                <div class="comment-header">
                                    <div class="comment-author">测试君</div>
                                    <div class="comment-time">1小时前</div>
                                </div>
                                <div class="comment-text">
                                    <span>@快乐小天使</span> 感谢您的认可！红色系性格确实很有感染力呢~
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action like-reply">
                                        <i class="far fa-heart"></i>
                                        <span>8</span>
                                    </div>
                                    <div class="comment-action reply-btn">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回复输入框 -->
                        <div class="reply-input-container">
                            <div class="user-avatar">
                                <img src="https://picsum.photos/id/237/100/100" alt="当前用户头像">
                            </div>
                            <div class="reply-input">
                                <input type="text" placeholder="回复 @快乐小天使...">
                                <button class="send-reply">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言2 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/62/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">静夜思</div>
                        <div class="comment-time">昨天 18:35</div>
                    </div>
                    <div class="comment-text">我测试出来是蓝色系，分析说我喜欢独处和思考，确实很符合我的性格。推荐大家试试！</div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>27</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复输入框 (默认隐藏，点击回复按钮显示) -->
                    <div class="reply-input-container" style="display: none;">
                        <div class="user-avatar">
                            <img src="https://picsum.photos/id/237/100/100" alt="当前用户头像">
                        </div>
                        <div class="reply-input">
                            <input type="text" placeholder="回复 @静夜思...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言3 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/68/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">风之子</div>
                        <div class="comment-time">3天前</div>
                    </div>
                    <div class="comment-text">有没有人跟我一样是绿色系的？想认识一下同样喜欢自然和平静的朋友~</div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>15</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-question-circle"></i>
            <span>测试</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById("backBtn");
        const shareBtn = document.getElementById("shareBtn");
        const collectBtn = document.getElementById("collectBtn");
        const likeBtn = document.getElementById("likeBtn");
        const replyBtns = document.querySelectorAll(".reply-btn");
        const likeComments = document.querySelectorAll(".like-comment");
        const likeReplies = document.querySelectorAll(".like-reply");
        const sendCommentBtn = document.querySelector(".send-comment");
        const sendReplyBtns = document.querySelectorAll(".send-reply");
        const commentInput = document.querySelector(".comment-input textarea");
        
        // 初始化
        function init() {
            setupEventListeners();
            adjustTextareaHeight();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
            });
            
            // 分享按钮
            shareBtn.addEventListener("click", () => {
                showShareOptions();
            });
            
            // 收藏按钮
            collectBtn.addEventListener("click", function() {
                this.querySelector("i").classList.toggle("far");
                this.querySelector("i").classList.toggle("fas");
                
                if (this.querySelector("i").classList.contains("fas")) {
                    showToast("收藏成功");
                } else {
                    showToast("取消收藏");
                }
            });
            
            // 点赞按钮
            likeBtn.addEventListener("click", function() {
                this.querySelector("i").classList.toggle("far");
                this.querySelector("i").classList.toggle("fas");
                this.querySelector("i").classList.toggle("text-secondary");
                this.querySelector("i").classList.toggle("text-secondary");
                this.querySelector("i").classList.toggle("text-danger");
            });
            
            // 回复按钮
            replyBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const commentItem = this.closest(".comment-content");
                    const replyInput = commentItem.querySelector(".reply-input-container");
                    
                    // 如果有其他打开的回复框，先关闭
                    document.querySelectorAll(".reply-input-container").forEach(input => {
                        if (input !== replyInput) {
                            input.style.display = "none";
                        }
                    });
                    
                    // 切换当前回复框显示状态
                    replyInput.style.display = replyInput.style.display === "flex" ? "none" : "flex";
                    
                    // 如果显示，则聚焦输入框
                    if (replyInput.style.display === "flex") {
                        replyInput.querySelector("input").focus();
                    }
                });
            });
            
            // 评论点赞
            likeComments.forEach(likeBtn => {
                likeBtn.addEventListener("click", function() {
                    const icon = this.querySelector("i");
                    const countEl = this.querySelector("span");
                    let count = parseInt(countEl.textContent);
                    
                    icon.classList.toggle("far");
                    icon.classList.toggle("fas");
                    icon.classList.toggle("text-danger");
                    
                    if (icon.classList.contains("fas")) {
                        countEl.textContent = count + 1;
                    } else {
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 回复点赞
            likeReplies.forEach(likeBtn => {
                likeBtn.addEventListener("click", function() {
                    const icon = this.querySelector("i");
                    const countEl = this.querySelector("span");
                    let count = parseInt(countEl.textContent);
                    
                    icon.classList.toggle("far");
                    icon.classList.toggle("fas");
                    icon.classList.toggle("text-danger");
                    
                    if (icon.classList.contains("fas")) {
                        countEl.textContent = count + 1;
                    } else {
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 发送评论
            sendCommentBtn.addEventListener("click", sendComment);
            
            // 按Enter发送评论
            commentInput.addEventListener("keydown", function(e) {
                if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    sendComment();
                }
            });
            
            // 发送回复
            sendReplyBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const replyInput = this.closest(".reply-input-container").querySelector("input");
                    const replyText = replyInput.value.trim();
                    
                    if (replyText) {
                        sendReply(this, replyText);
                        replyInput.value = "";
                    }
                });
            });
            
            // 开始测试按钮
            document.querySelector(".primary-action").addEventListener("click", function() {
                alert("即将开始色彩偏好测试");
            });
            
            // 查看更多结果
            document.querySelector(".see-more").addEventListener("click", function() {
                alert("查看所有测试结果");
            });
        }
        
        // 调整文本框高度
        function adjustTextareaHeight() {
            const textarea = commentInput;
            
            textarea.addEventListener("input", function() {
                this.style.height = "auto";
                this.style.height = (this.scrollHeight > 120 ? 120 : this.scrollHeight) + "px";
            });
        }
        
        // 发送评论
        function sendComment() {
            const text = commentInput.value.trim();
            
            if (!text) return;
            
            // 创建新评论元素
            const newComment = createCommentElement("我", text, "刚刚");
            
            // 添加到评论列表顶部
            document.querySelector(".comments-list").prepend(newComment);
            
            // 清空输入框并重置高度
            commentInput.value = "";
            commentInput.style.height = "auto";
            
            showToast("评论成功");
        }
        
        // 发送回复
        function sendReply(btn, text) {
            const replyContainer = btn.closest(".reply-input-container");
            const repliesContainer = replyContainer.parentElement;
            
            // 获取被回复的用户名
            const replyTo = replyContainer.querySelector("input").placeholder.match(/@(.*?)\./)[1];
            
            // 创建新回复元素
            const newReply = createReplyElement("我", replyTo, text, "刚刚");
            
            // 添加到回复列表
            repliesContainer.insertBefore(newReply, replyContainer);
            
            // 隐藏回复框
            replyContainer.style.display = "none";
            
            showToast("回复成功");
        }
        
        // 创建评论元素
        function createCommentElement(author, text, time) {
            const comment = document.createElement("div");
            comment.className = "comment-item";
            
            comment.innerHTML = `
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/237/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">${author}</div>
                        <div class="comment-time">${time}</div>
                    </div>
                    <div class="comment-text">${text}</div>
                    <div class="comment-actions">
                        <div class="comment-action like-comment">
                            <i class="far fa-heart"></i>
                            <span>0</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复输入框 -->
                    <div class="reply-input-container" style="display: none;">
                        <div class="user-avatar">
                            <img src="https://picsum.photos/id/237/100/100" alt="当前用户头像">
                        </div>
                        <div class="reply-input">
                            <input type="text" placeholder="回复 @${author}...">
                            <button class="send-reply">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            
            // 为新评论绑定事件
            bindCommentEvents(comment);
            
            return comment;
        }
        
        // 创建回复元素
        function createReplyElement(author, replyTo, text, time) {
            const reply = document.createElement("div");
            reply.className = "reply-item";
            
            reply.innerHTML = `
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/237/100/100" alt="用户头像">
                </div>
                <div class="reply-content">
                    <div class="comment-header">
                        <div class="comment-author">${author}</div>
                        <div class="comment-time">${time}</div>
                    </div>
                    <div class="comment-text">
                        <span>@${replyTo}</span> ${text}
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action like-reply">
                            <i class="far fa-heart"></i>
                            <span>0</span>
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                </div>
            `;
            
            // 为新回复绑定事件
            bindReplyEvents(reply);
            
            return reply;
        }
        
        // 绑定评论事件
        function bindCommentEvents(comment) {
            // 回复按钮
            const replyBtn = comment.querySelector(".reply-btn");
            replyBtn.addEventListener("click", function() {
                const replyInput = comment.querySelector(".reply-input-container");
                
                // 关闭其他回复框
                document.querySelectorAll(".reply-input-container").forEach(input => {
                    if (input !== replyInput) {
                        input.style.display = "none";
                    }
                });
                
                // 切换当前回复框
                replyInput.style.display = replyInput.style.display === "flex" ? "none" : "flex";
                
                // 聚焦输入框
                if (replyInput.style.display === "flex") {
                    replyInput.querySelector("input").focus();
                }
            });
            
            // 点赞按钮
            const likeBtn = comment.querySelector(".like-comment");
            likeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countEl = this.querySelector("span");
                let count = parseInt(countEl.textContent);
                
                icon.classList.toggle("far");
                icon.classList.toggle("fas");
                icon.classList.toggle("text-danger");
                
                countEl.textContent = icon.classList.contains("fas") ? count + 1 : count - 1;
            });
            
            // 发送回复按钮
            const sendReplyBtn = comment.querySelector(".send-reply");
            sendReplyBtn.addEventListener("click", function() {
                const replyInput = this.closest(".reply-input-container").querySelector("input");
                const replyText = replyInput.value.trim();
                
                if (replyText) {
                    const replyTo = replyInput.placeholder.match(/@(.*?)\./)[1];
                    sendReply(this, replyText);
                    replyInput.value = "";
                }
            });
        }
        
        // 绑定回复事件
        function bindReplyEvents(reply) {
            // 回复按钮
            const replyBtn = reply.querySelector(".reply-btn");
            replyBtn.addEventListener("click", function() {
                // 找到最近的评论内容容器
                const commentContent = this.closest(".comment-content") || this.closest(".reply-content").parentElement.parentElement;
                const existingReplyInput = commentContent.querySelector(".reply-input-container");
                
                // 如果已有回复框，先移除
                if (existingReplyInput) {
                    commentContent.removeChild(existingReplyInput);
                }
                
                // 创建新的回复框
                const author = this.closest(".reply-content").querySelector(".comment-author").textContent;
                const replyInput = document.createElement("div");
                replyInput.className = "reply-input-container";
                replyInput.style.display = "flex";
                
                replyInput.innerHTML = `
                    <div class="user-avatar">
                        <img src="https://picsum.photos/id/237/100/100" alt="当前用户头像">
                    </div>
                    <div class="reply-input">
                        <input type="text" placeholder="回复 @${author}..." autofocus>
                        <button class="send-reply">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                `;
                
                // 添加到回复列表
                const repliesContainer = this.closest(".replies") || this.closest(".comment-content");
                repliesContainer.appendChild(replyInput);
                
                // 绑定发送回复事件
                replyInput.querySelector(".send-reply").addEventListener("click", function() {
                    const input = this.closest(".reply-input-container").querySelector("input");
                    const text = input.value.trim();
                    
                    if (text) {
                        sendReply(this, text);
                        input.value = "";
                    }
                });
            });
            
            // 点赞按钮
            const likeBtn = reply.querySelector(".like-reply");
            likeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countEl = this.querySelector("span");
                let count = parseInt(countEl.textContent);
                
                icon.classList.toggle("far");
                icon.classList.toggle("fas");
                icon.classList.toggle("text-danger");
                
                countEl.textContent = icon.classList.contains("fas") ? count + 1 : count - 1;
            });
        }
        
        // 显示分享选项
        function showShareOptions() {
            // 在实际应用中，这里会显示分享到微信、微博等选项
            alert("分享到：微信好友、朋友圈、微博、QQ好友");
        }
        
        // 显示提示消息
        function showToast(message) {
            // 检查是否已有toast，有则移除
            const existingToast = document.querySelector(".toast-message");
            if (existingToast) {
                existingToast.remove();
            }
            
            // 创建新toast
            const toast = document.createElement("div");
            toast.className = "toast-message";
            toast.style.position = "fixed";
            toast.style.bottom = "80px";
            toast.style.left = "50%";
            toast.style.transform = "translateX(-50%)";
            toast.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
            toast.style.color = "white";
            toast.style.padding = "8px 16px";
            toast.style.borderRadius = "4px";
            toast.style.fontSize = "0.9rem";
            toast.style.zIndex = "9999";
            toast.textContent = message;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 3秒后移除
            setTimeout(() => {
                toast.style.opacity = "0";
                toast.style.transition = "opacity 0.3s ease";
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 3000);
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
